<script setup lang="ts" name="consultDetail">
import {ref, onMounted, reactive, computed} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useTypeFormtApi } from '/@/api/consult/typeform';

// 定义变量内容
const router = useRouter();
const route = useRoute();
const state = reactive({
	consultInfo: {},
	followList: [],
});

// 更新咨询状态
const updateConsultStatus = async (consult_id: number, status: number) => {
	let text = status == 3 ? '暂停跟进' : (status == 4 ? '已转化' : '删除咨询');
	ElMessageBox.confirm(`确定要：“${text}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
	.then(async () => {
		const res = await useTypeFormtApi().updateCustomerConsultStatus({consult_id: consult_id,  status: status});
		if(res.code === 200) {
			ElMessage.success(text + '成功');
			await getPageData(consult_id);
		} else {
			ElMessage.error(res.message);
		}
	})
	.catch(() => {});
};

// 查看下一条
const nextPage = async (consult_id: number) => {
	await getPageData(consult_id, 'next')
};

// 打开弹窗
const getPageData = async (id: number, type: string = '') => {
	const res = await useTypeFormtApi().getCustomerConsultDetailData({consult_id: id, type: type});
	if (res.code === 200) {
		state.consultInfo = res.data.consultInfo;
		state.followList = res.data.followList;
	} else {
		ElMessage.error(res.message);
	}
};
onMounted(() => {
	const consult_id = parseInt(route.params.id);
	getPageData(consult_id);
});
</script>

<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">

			<el-col :span="24" class="mt20 mb-20 flex-row-top-end" v-if="state.consultInfo != null && JSON.stringify(state.consultInfo) !== '{}'">
				<el-button type="danger" text @click="updateConsultStatus(state.consultInfo.id, 0)" v-if="state.consultInfo.status != 0">删除咨询</el-button>
				<el-button type="danger" @click="updateConsultStatus(state.consultInfo.id, 3)" v-if="state.consultInfo.status != 0">暂停跟进</el-button>
				<el-button type="success" @click="updateConsultStatus(state.consultInfo.id, 4)" v-if="state.consultInfo.status != 0">已转化</el-button>
				<el-button type="primary" @click="nextPage(state.consultInfo.id)">查看下一条</el-button>
			</el-col>

			<el-descriptions title="" border column="2">
				<el-descriptions-item label="类型表单" align="center" rowspan="1">{{ state.consultInfo.class_name }}</el-descriptions-item>
				<el-descriptions-item label="咨询状态" align="center">
					<el-text :type="state.consultInfo.status === 1 ? 'warning' : (state.consultInfo.status === 2 ? 'success' : (state.consultInfo.status === 3 ? 'danger' : (state.consultInfo.status === 4 ? 'primary' : 'info')))">{{ state.consultInfo.status_text }}</el-text>
				</el-descriptions-item>

				<el-descriptions-item label="姓名" align="center">{{ state.consultInfo.name }}</el-descriptions-item>
				<el-descriptions-item label="电话" align="center">{{ state.consultInfo.mobile }}</el-descriptions-item>
			</el-descriptions>

			<el-descriptions title="" border column="1">
				<el-descriptions-item label="提交时间" align="center">{{ state.consultInfo.create_time }}</el-descriptions-item>
			</el-descriptions>

			<el-descriptions title="" border column="2" direction="vertical">
				<el-descriptions-item label="咨询详情" align="center" direction="vertical">
					<div style="">
						<el-text>{{ state.consultInfo.content }}</el-text>
					</div>
				</el-descriptions-item>
			</el-descriptions>

			<el-col :span="24" class="mt20 mb-10">
				<el-text size="large" style="font-weight: bold;">跟进情况</el-text>
			</el-col>
			<el-table
				:data="state.followList"
				border size="small"
				:header-cell-style="{backgroundColor: '#EBECF7', color: '#010101'}"
				highlight-current-row
				style="width: 100%"
				empty-text="暂无跟进"
			>
				<el-table-column label="序号" type="index" show-overflow-tooltip min-width="60" align="center"></el-table-column>
				<el-table-column label="跟进人" prop="lawyer_name" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column label="添加跟进时间" prop="follow_time" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column label="更新跟进状态时间" prop="update_time" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column label="跟进状态" prop="content" show-overflow-tooltip min-width="150" align="center">
					<template v-slot="scope">
						<el-tag :type="scope.row.follow_status === 1 ? 'warning' : (scope.row.follow_status === 2 ? 'success' : (scope.row.follow_status === 3 ? 'warning' : (scope.row.follow_status === 4 ? 'danger' : 'primary')))">{{ scope.row.follow_status_text }}</el-tag>
					</template>
				</el-table-column>
			</el-table>

		</el-card>
	</div>
</template>

<style scoped lang="scss">

</style>